<template>
	<view class="container">
		<video style="border: 1px solid #333; max-width: 500px;"  autoplay  id="player" ref="player" ></video>
	</view>
</template>

<script>
	import JMuxer from 'jmuxer'
	export default {
		name:'myplayer',
		data() {
			return {
				jmuxer: null,
				reader: null,
				duration: 1000,
			}
		},
		mounted() {
			this.player()
		},
		methods: {
			
			fileToBuf(file){
				let that =this
				let reader = new FileReader();
				console.log(file)
				reader.readAsArrayBuffer(file);
				reader.addEventListener("loadend",(e) => {
					console.log(e.target.result)
					that.jmuxer.feed({
						video: new Uint8Array(e.target.result),
						duration: 0
					});
				},false);
			
			},
			player(){
				let that = this
				if (that.jmuxer) {
				    that.jmuxer.destroy();
				}
				let videoFile = '../../static/_xh-00004_1713489934546_268_2.h264';
				fetch(videoFile).then(res => res.blob()).then(blob => {
					that.fileToBuf(blob)
				})
				that.jmuxer = new JMuxer({
					node: that.$refs.player,
					mode: 'video',
					flushingTime: 1000,
					fps: 30,
					clearBuffer: true,
					debug: true
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
